<template>
  <div :class="['tp-org-box', {[style.hoverClass]: hover}]" 
    :style="{
      width: style.itemWidth, 
      height: style.itemHeight, 
      border: `${style.strokeWidth}px solid ${style.strokeColor}`,
      borderRadius: style.strokeRadius+'px', 
      backgroundColor: style.itemBgColor
    }"
    @mouseenter="mouseOver" 
    @mouseleave="mouseLeave"
  >
    <div v-if="style.btns && !style.onlyShow" v-show="mouseOverFlag" class="tp-org-box--op" @click="showBtns">
      <tp-org-icon icon="tp-icon-elipsis"></tp-org-icon>
    </div>
    <div 
      v-if="!style.onlyShow"
      v-show="showBtnsPanel" 
      class="tp-org-box--panel" 
      :style="{borderRadius:style.strokeRadius+'px'}"
      @mouseleave="showBtnsPanel=false"
    >
      <div 
        :class="['tp-org-box--panel--btn']" 
        v-for="btn in style.btns" :key="btn.label"
        @click="clickBtn(btn.callback)"
      >
        <tp-org-icon :icon="btn.icon" :color="btn.color"></tp-org-icon><span v-text="btn.label" :style="{color:btn.color}"></span>
      </div>
    </div>
    <span v-text="data[top.propsKey.label]" :style="{fontSize: style.fontSize, color: style.color}"></span>
  </div>
</template>

<script>
import TpOrgIcon from '../icon/Icon';
export default {
  name: 'TpOrgBox',
  components: { TpOrgIcon },
  inject: ['style', 'top'],
  props: {
    data: {
      type: Object,
      required: true
    },
    parent: Object
  },
  data() {
    return {
      hover: false,
      mouseOverFlag: false,
      showBtnsPanel: false
    }
  },
  methods: {
    mouseOver() {
      this.mouseOverFlag = true;
      if (this.style.hoverClass) this.hover = true;
    },
    mouseLeave() {
      this.showBtnsPanel = false;
      this.mouseOverFlag = false;
      this.hover = false;
    },
    showBtns() {
      this.showBtnsPanel = true;
    },
    clickBtn(func) {
      this.showBtnsPanel = false;
      if (typeof func === 'function') {
        func(this.data, this.parent);
      }
    }
  }
}
</script>